<template>
    <div>
        <div class="tabs">
            <div
                    v-for="(tab, index) in tabs"
                    :key="index"
                    :class="{ active: index === activeTab }"
                    @click="switchTab(index)"
            >
                {{ tab.title }}
            </div>
        </div>
        <div class="web-page">
            <webview
                    v-for="(tab, index) in tabs"
                    :key="index"
                    ref="webview"
                    :src="tab.url"
                    :style="{ display: index === activeTab ? 'block' : 'none' }"
            ></webview>
        </div>
    </div>
</template>

<script>
import { onMounted, ref } from 'vue'
import { ipcRenderer } from 'electron'

export default {
    setup() {
        const tabs = ref([
            { title: 'Tab 1', url: 'https://example.com' },
            { title: 'Tab 2', url: 'https://example.org' }
        ])
        const activeTab = ref(0)

        const switchTab = (index) => {
            activeTab.value = index
        }

        const addTab = (url) => {
            tabs.value.push({ title: 'New Tab', url })
            activeTab.value = tabs.value.length - 1
        }

        onMounted(() => {
            ipcRenderer.on('new-tab', (event, url) => {
                addTab(url)
            })
        })

        return {
            tabs,
            activeTab,
            switchTab
        }
    }
}
</script>

<style>
.tabs {
    display: flex;
    border-bottom: 1px solid #ccc;
}

.tabs div {
    padding: 8px 12px;
    cursor: pointer;
    user-select: none;
}

.tabs div.active {
    background-color: #ccc;
}

.web-page {
    position: absolute;
    top: 32px;
    bottom: 0;
    left: 0;
    right: 0;
}

webview {
    width: 100%;
    height: 100%;
}
</style>
